<template>
  <div class="booking">
    <booking-box
      @getList="getList"
      @changeDate="changeDate"
      @reload="reload"
    ></booking-box>
    <booking-list
      :flights="flights"
      @changeDate="changeDate"
      @reload="reload"
      @getList="getList"
      :tempDate="tempDate"
    ></booking-list>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, Ref, onMounted, inject, useContext } from 'vue';
import BookingBox from '@/components/Booking/BookingBox/Index.vue';
import BookingList from '@/components/Booking/BookingList/Index.vue';
import { FlightInBuy } from '@/types/Flight';
import { FlightService } from '@/utils/api/flight';
import { useStore } from 'vuex';

export default defineComponent({
  name: 'Booking',
  components: { BookingBox, BookingList },
  setup() {
    onMounted(() => {
      getList();
    });
    const store = useStore();
    const flightInBuy: Ref<FlightInBuy> = ref({
      departureDate: store.state.formData.departureDate,
      departureCity: store.state.formData.departureCity,
      arrivalCity: store.state.formData.arrivalCity,
    });
    const flights = ref([
      {
        flightId: 'MU123',
        planeModel: '波音747',
        baggageAllowance: 20,
        departureDate: new Date(),
        departureTime: new Date(),
        departureAirport: '大兴国际机场',
        arrivalDate: new Date(),
        arrivalTime: new Date(),
        arrivalAirport: '上海虹桥机场',
        duration: '2小时15分',
        constructionCost: 150,
        economyPrice: 400,
        economyNum: 123,
        businessPrice: 800,
        businessNum: 20,
        firstPrice: 1100,
        firstNum: 4,
      },
    ]);
    const reload: any = inject('reload');
    const getList = () => {
      console.log(tempDate);
      FlightService.selectFlight(flightInBuy.value as any)
        .then((res) => {
          (flights.value as any) = res.data;
          console.log('res: ', res);
        })
        .catch((error) => {
          console.log(error);
        });
    };
    const tempDate = ref(flightInBuy.value.departureDate);
    const changeDate = (date: Date) => {
      tempDate.value = date;
      store.commit('changeDD', date);
      console.log(tempDate.value);
    };
    return {
      flights,
      getList,
      changeDate,
      tempDate,
      reload,
    };
  },
});
</script>

<style lang="scss" scoped>
.booking {
  margin: 0 auto;
  padding: 40px 0;
  background-color: #fff;
}
</style>
